<template>
  <div>
    <el-dialog v-if="enable" :visible.sync="enable" title="用户编辑">
      <el-form ref="form" label-width="80px" :model="model" :rules="rules">
        <el-form-item label="用户名">
          <el-input v-model="model.User"></el-input>
        </el-form-item>
        <el-form-item label="主机">
          <el-select v-model="model.Host" filterable allow-create default-first-option style="width:100%">
            <el-option label="任何" value="%"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="model.Password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="actionCreate">创建</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
    name : 'MysqlUserEditDialog',
    data() {
        return {
            enable : false,
            connection : null,
            model : {},
            rules : {},
        };
    },
    methods : {
        // 打开对话框
        async create( connection ) {
            this.connection = connection;

            this.model = {};
            this.enable = true;
        },

        // 创建数据库
        async actionCreate() {
            let sql = `CREATE USER '${this.model.User}'@'${this.model.Host}' IDENTIFIED BY '${this.model.Password}'`;
            try {
                await this.connection.execute(sql);
            } catch ( e ) {
                this.$message.error(e.message);
                return;
            }

            this.$emit('created');
            this.enable = false;
        }
    }
}
</script>